﻿@using PagedList
@using PagedList.Mvc
@model IEnumerable<NapCardOnline.Models.Contact>
<!-- Button to trigger modal -->
<a href="#myModal" role="button" class="btn" data-toggle="modal">Mở danh bạ</a>
<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
    aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
            ×</button>
        <h3>
            <span class="input-append">
                <input type="text" id="contact_searchquery" class="span3 search-query" placeholder="Tìm kiếm">
                <button id="contact_addnew" class="btn" type="button">
                    <i class="icon-plus"></i>Thêm</button>
                <button id="contact_delete" class="btn" type="button">
                    <i class="icon-remove"></i>Xóa</button>
                <button id="contact_edit" class="btn" type="button">
                    <i class="icon-pencil"></i>Sửa</button>
            </span><span id="ajax-loading" class="hide">
                <img width="24" src="../../Images/ajax_loading.gif" /></span>
            <form id="addphone_form" class="hide form-inline" onsubmit="return false;">
            <div class="control-group" style="display: inline-block;">
                <label class="control-label" for="phone_number">
                    Số điện thoại</label>
                <div class="controls">
                    <input type="text" name="phone_number" value="" id="phone_number" title="" placeholder="Số điện thoại"
                        maxlength="11" style="width: 156px">
                    <span class="help-inline" style="font-size: 14px; font-weight: normal;"></span>
                </div>
            </div>
            <div class="control-group" style="display: inline-block;">
                <label class="control-label" for="name">
                    Tên liên lạc</label>
                <div class="controls">
                    <input type="text" name="name" value="" id="contact_name" title="" placeholder="Tên liên lạc"
                        maxlength="50" style="width: 156px" />
                    <label class="hide" id="span_contact_id" title="">
                    </label>
                    @* <input type="text" class="hide"  value="" id="span_contact_id" title="" 
                           maxlength="50" style="width: 156px" />*@ <span class="help-inline" style="font-size: 14px;
                               font-weight: normal;"></span>
                </div>
            </div>
            <div class="control-group" style="display: inline-block;">
                <div class="controls">
                    <button id="contact_submit" class="btn btn-primary btn-submit">
                        Lưu</button>
                </div>
            </div>
            </form>
        </h3>
        @* <h3 id="myModalLabel">
            TEST</h3>*@
    </div>
    <div class="modal-body">
        <div id="wrapper" style="position: relative; overflow: hidden">
            <div id="scroller" style="-webkit-transition: -webkit-transform 0ms; transition: -webkit-transform 0ms;
                -webkit-transform-origin: 0px 0px; -webkit-transform: translate(0px, 0px) translateZ(0px);">
                <ul id="phonebook" class="nav nav-list bs-docs-sidenav" style="width: 530px; margin: 0;
                    text-align: left">
                    @{
                        int i = 0;
                    }
                    @foreach (var model in Model)
                    {
                        if (i == 0)
                        {
                        <li class="active"><a href="#"><span id="contactname" style="font-size: 14px;">@(model.ContactName)</span>
                            <br>
                            <span id="contact-id" class="hide" data-phone="@(model.ContactID)" style="font-size: 14px;">@(model.ContactID)</span>
                            <span id="contactphonenumber" data-phone="@(model.ContactNumber)" style="font-size: 14px;">@(model.ContactNumber)</span>
                        </a></li>
                        }
                        else
                        {
                        <li class=""><a href="#"><span id="contactname" style="font-size: 14px;">@(model.ContactName)</span>
                            <br>
                            <span id="contact-id" class="hide" data-phone="@(model.ContactID)" style="font-size: 14px;">@(model.ContactID)</span>
                            <span id="contactphonenumber" data-phone="@(model.ContactNumber)" style="font-size: 14px;">@(model.ContactNumber)</span>
                        </a></li> 
                        }
                        i++;
                    }
                </ul>
            </div>
        </div>
    </div>
    <div class="modal-footer">
        <button id="choosecontact" data-dismiss="modal" aria-hidden="true" class="btn btn-primary">
            Chọn</button>
        <button class="btn" data-dismiss="modal" aria-hidden="true">
            Đóng</button>
    </div>
</div>
<script type="text/javascript">
    $(function () {
        $("#contact_searchquery").focus();
        //Button chossecontact click
        $("#choosecontact").click(function () {
            chooseContact();
        });
        //Button addnew click
        $("#contact_addnew").click(function () {
            $("#phone_number").val('');
            $("#phone_number").focus();
            $("#contact_name").val('');
            $("#span_contact_id").val('');
            $("#addphone_form").removeClass().addClass("show hide form-inline");
            
        });
        //Button edit click
        $("#contact_edit").click(function () {
            $("#addphone_form").removeClass().addClass("show hide form-inline");
            var contactName = $("#phonebook").find("li.active #contactname");
            var phoneNumber = $("#phonebook").find("li.active #contactphonenumber");
            var contactId = $("#phonebook").find("li.active #contact-id");
            $("#phone_number").val(phoneNumber.text());
            $("#contact_name").val(contactName.text());
            $("#span_contact_id").val(contactId.text());
        });
        //Button Save click
        $("#contact_submit").click(function (e) {
            $("#ajax-loading").removeClass().addClass("show");
            e.preventDefault();
            var phoneNumber = $("#phone_number").val();
            var contactName = $("#contact_name").val();
            var contactId = $("#span_contact_id").val();
            if (phoneNumber.length > 0 && contactName.length > 0) {
                //Edit
                if (contactId > 0) {
                    var objContact = {
                        phone: phoneNumber,
                        contactName: contactName,
                        id: contactId,
                    };
                    if (phoneNumber.length > 0 && contactName.length > 0) {
                        $.ajax({
                            url: '@Url.Action("Edit", "Contact")',
                            data: JSON.stringify(objContact),
                            type: 'POST',
                            contentType: 'application/json; charset=utf-8',
                            dataType: 'json',
                            success: function (data) {
                                var liative = $("#phonebook li.active");
                                liative.removeClass();
                                liative.replaceWith('<li class="active"><a href="#"><span id="contactname" style="font-size: 14px;">' + data.contactName + '</span> <br><span id="contact-id" class="hide" data-phone='+data.id+' style="font-size: 14px;">'+data.id+'</span> <span id="contactphonenumber" data-phone=' + data.phone + ' style="font-size: 14px;">' + data.phone + '</span> </a></li>');
                                $("#addphone_form").removeClass().addClass("hide hide form-inline");
                                $("#phone_number").val();
                                $("#contact_name").val();
                                $("#input_contact_id").val();
                                phonebook();
                            },
                            error: function () {
                                alert("Chưa cập nhật được. Bạn vui lòng thử lại sau");
                            },
                                                
                        });
                    } else {
                        alert("Bạn vui lòng nhập đầy đủ thông tin danh bạ!");
                    }
                }
                    //Create
                else {
                    $.ajax({
                        url: '@Url.Action("Create", "Contact")',
                        data: { phoneNumber: phoneNumber, contactName: contactName },
                        type: 'POST',
                        success: function (data) {
                            if (data.phone.length > 0) {
                                $("#phonebook li").removeClass();
                                $("#phonebook").append('<li class="active"><a href="#"><span id="contactname" style="font-size: 14px;">' + data.name + '</span> <br><span id="contact-id" class="hide" data-phone='+data.contactId+' style="font-size: 14px;">'+data.contactId+'</span> <span id="contactphonenumber" data-phone=' + data.phone + ' style="font-size: 14px;">' + data.phone + '</span> </a></li>');
                                $("#addphone_form").removeClass().addClass("hide hide form-inline");
                                $("#phone_number").val();
                                $("#contact_name").val();
                                $("#input_contact_id").val();
                                phonebook();
                                  $("#ajax-loading").removeClass().addClass("hide");
                            } else {
                                alert("Số điện thoại đã tồn tại. Bạn vui lòng kiểm tra lại!");
                            }
                        },
                        error: function () {
                            alert("Không thêm được!");
                        }
                    });
                }
            } else {
                alert("Bạn vui lòng nhập đầy đủ thông tin danh bạ!");
            }
           $("#ajax-loading").removeClass().addClass("hide");
        });
        //Button Delete click
        $("#contact_delete").click(function(e) {
            
            var contactId = $("#phonebook").find("li.active #contact-id");
            if(confirm("Bạn có đồng ý xóa tên liên lạc này?")) {
                $.ajax({
                    url: '@Url.Action("Delete", "Contact")',
                    data: { id:contactId.text() },
                    type: 'POST',
                    success: function (data) {
                        $("#phonebook li.active").remove();
                        $("#addphone_form").removeClass().addClass("hide hide form-inline");
                        $("#phone_number").val();
                        $("#contact_name").val();
                        $("#input_contact_id").val();
                    },
                    error: function () {
                        alert("Chưa xóa được. Bạn vui lòng thử lại sau!");
                    }
                });
            } else {
                return;
            }
        });
        phonebook();
    });

    function phonebook() {
        //Grid item click
        $("#phonebook li").on('click', function (e) {
            $("#phonebook li").removeClass();
            $(this).removeClass().addClass("active");
            var phoneNumber = $(this).find("#contactphonenumber");
            var contactName = $(this).find("#contactname");
            var contactId = $(this).find("#contact-id");
            $("#phone_number").val(phoneNumber.text());
            $("#contact_name").val(contactName.text());
            $("#span_contact_id").val(contactId.text());
        });
        //Grid item double click
        $("#phonebook li a").dblclick(function () {
            $("#choosecontact").click();
        });
    }

    function chooseContact() {
        var phoneChoose = $("#phonebook").find("li.active #contactphonenumber");
        if (phoneChoose.length > 0) {
            $("#paymentAmount").val(phoneChoose.text());
            $("#paymentAmount").change().focus();
        }
    };
</script>
<script src="../../Scripts/NCOL/Contact/contact.filter.js" type="text/javascript"></script>
